<!--快速开发组件-->
<template>
  <div class="item">
    <div class="img_box">
      <div class="lt_img">
        <svg-icon :icon-class="data.file" class-name="rapid_icon"></svg-icon>
      </div>
      <div class="rt_cont">
        <h5>{{ data.name }}</h5>
        <p class="sub">{{ data.content }}</p>
        <div class="group">
          <el-button
            size="mini"
            type="primary"
            plain
            @click="preview(data.dir, data.name, data.content)"
            >预览</el-button
          >
          <el-button
            size="mini"
            type="warning"
            plain
            @click="download(data.dir, data.file)"
            >下载</el-button
          >
        </div>
      </div>
    </div>
    <el-dialog
      title="文件预览"
      top="5vh"
      :visible.sync="isVisible"
      width="712px"
    >
      <div class="block" :style="{ 'max-height': height + 'px' }">
        <div class="lt">
          <el-scrollbar style="height: 100%">
            <el-tree
              :data="treeData"
              node-key="id"
              default-expand-all
              :expand-on-click-node="false"
            >
            </el-tree>
          </el-scrollbar>
        </div>
        <div class="rt">
          <h5>{{ currentTitle }}</h5>
          <div class="cont">
            {{ currentCont }}
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Api from '@/api';
import { exportFile } from '@/plugins/tools';

export default {
  props: {
    data: {
      type: Object,
      default: () => { },
    },
  },
  data () {
    return {
      isVisible: false,
      currentTitle: null,
      currentCont: null,
      treeData: [],
      height: 0,
    };
  },
  mounted () {
    this.height = Number(document.body.clientHeight) * 0.9 - 105
  },
  methods: {
    preview (dir, title, content) {
      this.currentTitle = title
      this.currentCont = content
      this.getFileNameList(dir)
      this.isVisible = true
    },
    download (dir, fileName) {
      this.getFileResource(dir, fileName)
    },
    getFileResource (dir, fileName) {
      let that = this;
      Api.getFastStartResource({ fileDir: dir }).then(res => {
        exportFile(res, fileName, 'zip')
      })
    },
    getFileNameList (dir) {
      Api.getFileNameList({ fileDir: dir }).then(res => {
        if (res.status == 200) {
          this.treeData = res.data
        }
      })
    }
  },
};
</script>
<style lang="scss" scoped>
.item {
  background-color: #fff;
  padding: 10px;
  .img_box {
    height: 120px;
    display: flex;
    flex-direction: row;
    .lt_img {
      flex-shrink: 0;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.5);
      text-align: center;
      line-height: 100px;
      overflow: hidden;
      padding: 8px;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
    .rt_cont {
      padding: 5px 15px;
      width: 160px;
      h5 {
        font-size: 16px;
        color: #333;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        width: 100%;
      }
      .sub {
        font-size: 14px;
        color: #727b84;
        margin: 10px 0;
        height: 38px;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        display: -webkit-box;
        -webkit-line-clamp: 2;
      }
    }
  }
  /deep/ .el-dialog__body {
    padding: 12px 20px 40px;
  }
  .block {
    display: flex;
    flex-direction: row;
    min-height: 500px;
    overflow: hidden;
    .lt {
      width: 400px;
      flex-shrink: 1;
      .el-tree {
        /deep/ {
          .el-tree-node__label {
            color: #333;
          }
        }
      }
      /deep/ .el-scrollbar__wrap {
        overflow-x: hidden;
        margin-bottom: 0;
      }
    }
    .rt {
      flex: 1;
      background: #f1f1f1;
      padding: 5px 10px;
      h5 {
        font-size: 20px;
        line-height: 32px;
        margin-bottom: 10px;
      }
      .cont {
        font-size: 14px;
        letter-spacing: 1px;
        line-height: 22px;
        color: #565656;
      }
    }
  }
}
</style>